<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type='text/javascript' src='jquery-1.10.2.js'></script>
<!--<script type='text/javascript' src='jquery-tmpl.js'></script>-->
<script type='text/javascript' src='knockout-2.3.0.js'></script>
</head>
<body>
<script>
var availableMeals = [
		{ mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
		{ mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
		{ mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
	  ];
$(function(){
	
	var viewModel = {
		chosenMeal: ko.observable(availableMeals[0])
	};

	ko.applyBindings(viewModel); // Makes Knockout get to work
	// 注意：ko. applyBindings需要在上述HTML之后应用才有效
});

function formatPrice(price) {
    return price == 0 ? "Free" : "$" + price.toFixed(2);
}

</script>
<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal: <select data-bind="options: availableMeals,
                                optionsText: 'mealName',
                                value: chosenMeal"></select>
								
								<p>
You've chosen:
    <b data-bind="text: chosenMeal().description"></b>
    (price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)
</p>
</body>
</html>